<template>
  <div class="content">
    <div class="top">
      <div class="left">
        <el-button>刷新</el-button>
        <el-button type="danger" @click="dialogVisible = true">
          删除
        </el-button>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="20%"
          height="50px"
          :before-close="handleClose"
        >
          <span>是否要清空日志？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false, shan()" 
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <p>
          日志保存天数
          <el-input-number
            v-model="num"
            controls-position="right"
            @change="handleChange"
            :min="1"
            :max="10"
          ></el-input-number>
        </p>
      </div>
      <div class="right">
        <el-form class="demo-form-inline">
          <el-form-item>
            <el-input
              placeholder="请输入关键字"
              style="width: 260px"
            ></el-input>
            <el-button type="primary" style="height: 35px">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="el-table">
      <el-table :data="menulist" border style="width: 100%; height: 1000px">
        <el-table-column type="index" label="#" width="150"></el-table-column>
        <el-table-column prop="userId" label="id"> </el-table-column>
        <el-table-column prop="name" label="名称" width="250"></el-table-column>
        <el-table-column prop="action" label="请求地址"> </el-table-column>
        <el-table-column prop="params" label="参数"> </el-table-column>
        <el-table-column prop="ip" label="ip"> </el-table-column>
        <el-table-column prop="ipAddr" label="ip地址"> </el-table-column>
        <el-table-column prop="updateTime" label="创建时间"> </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    handleClose(done) {
      var a = this.$confirm("确认关闭？");
      if (a) {
        done();
      }
    },
    handleChange(value) {
      console.log(value);
    },
    shan() {
      this.menulist = [];
    },
  },
  data() {
    return {
      currentPage4: 4,
      num: 1,
      dialogVisible: false,
      menulist: [
        {
          id: 4858,
          createTime: "2022-11-07 20:33:39",
          updateTime: "2022-11-07 20:33:39",
          userId: "1",
          action: "/admin/base/sys/log/page",
          ip: "61.158.147.24",
          ipAddr: "无法获取地址信息",
          params: "{/page/:1,/size/:20,/sort/:/desc/,/order/:/createTime/}",
          name: "超级管理员",
        },
        {
          id: 4857,
          createTime: "2022-11-07 20:33:39",
          updateTime: "2022-11-07 20:33:39",
          userId: "1",
          action: "/admin/base/sys/log/getKeep",
          ip: "61.158.147.24",
          ipAddr: "无法获取地址信息",
          params: null,
          name: "超级管理员",
        },
        {
          id: 4856,
          createTime: "2022-11-07 20:33:39",
          updateTime: "2022-11-07 20:33:39",
          userId: "1",
          action: "/admin/dict/info/data",
          ip: "61.158.147.24",
          ipAddr: "无法获取地址信息",
          params: null,
          name: "超级管理员",
        },
        {
          id: 4855,
          createTime: "2022-11-07 20:33:39",
          updateTime: "2022-11-07 20:33:39",
          userId: "1",
          action: "/admin/base/comm/permmenu",
          ip: "61.158.147.24",
          ipAddr: "无法获取地址信息",
          params: null,
          name: "超级管理员",
        },
        {
          id: 4854,
          createTime: "2022-11-07 20:33:39",
          updateTime: "2022-11-07 20:33:39",
          userId: "1",
          action: "/admin/base/comm/person",
          ip: "61.158.147.24",
          ipAddr: "无法获取地址信息",
          params: null,
          name: "超级管理员",
        },
        {
          id: 4852,
          createTime: "2022-11-07 20:30:33",
          updateTime: "2022-11-07 20:30:33",
          userId: "1",
          action: "/admin/base/sys/menu/list",
          ip: "39.82.203.250",
          ipAddr: "无法获取地址信息",
          params: null,
          name: "超级管理员",
        },
        {
          id: 4853,
          createTime: "2022-11-07 20:30:33",
          updateTime: "2022-11-07 20:30:33",
          userId: "1",
          action: "/admin/base/sys/department/list",
          ip: "39.82.203.250",
          ipAddr: "无法获取地址信息",
          params: null,
          name: "超级管理员",
        },
        {
          id: 4851,
          createTime: "2022-11-07 20:30:33",
          updateTime: "2022-11-07 20:30:33",
          userId: "1",
          action: "/admin/base/sys/role/info",
          ip: "39.82.203.250",
          ipAddr: "无法获取地址信息",
          params: '{"id":"11"}',
          name: "超级管理员",
        },
        {
          id: 4850,
          createTime: "2022-10-07 03:11:19",
          updateTime: "2022-10-07 03:11:19",
          userId: null,
          action: "/",
          ip: "59.57.154.178, 127.0.0.1",
          ipAddr: "无法获取地址信息,无法获取地址信息",
          params: null,
          name: null,
        },
        {
          id: 4849,
          createTime: "2022-10-07 03:10:28",
          updateTime: "2022-10-07 03:10:28",
          userId: null,
          action: "/",
          ip: "59.57.154.178, 127.0.0.1",
          ipAddr: "无法获取地址信息,无法获取地址信息",
          params: null,
          name: null,
        },
        {
          id: 4848,
          createTime: "2022-10-07 03:10:28",
          updateTime: "2022-10-07 03:10:28",
          userId: null,
          action: "/",
          ip: "59.57.154.178, 127.0.0.1",
          ipAddr: "无法获取地址信息,无法获取地址信息",
          params: null,
          name: null,
        },
        {
          id: 4847,
          createTime: "2022-10-07 03:10:28",
          updateTime: "2022-10-07 03:10:28",
          userId: null,
          action: "/",
          ip: "59.57.154.178, 127.0.0.1",
          ipAddr: "无法获取地址信息,无法获取地址信息",
          params: null,
          name: null,
        },
        {
          id: 4846,
          createTime: "2022-10-07 03:10:28",
          updateTime: "2022-10-07 03:10:28",
          userId: null,
          action: "/",
          ip: "59.57.154.178, 127.0.0.1",
          ipAddr: "无法获取地址信息,无法获取地址信息",
          params: null,
          name: null,
        },
        {
          id: 4845,
          createTime: "2022-10-07 03:10:27",
          updateTime: "2022-10-07 03:10:27",
          userId: null,
          action: "/",
          ip: "59.57.154.178, 127.0.0.1",
          ipAddr: "无法获取地址信息,无法获取地址信息",
          params: null,
          name: null,
        },
        {
          id: 4844,
          createTime: "2022-10-07 03:10:24",
          updateTime: "2022-10-07 03:10:24",
          userId: null,
          action: "/",
          ip: "59.57.154.178, 127.0.0.1",
          ipAddr: "无法获取地址信息,无法获取地址信息",
          params: null,
          name: null,
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.el-main {
  padding-top: 0;
}
.content {
  width: 100%;
  height: 630px;
  background-color: #fff;
  overflow: hidden;

  .el-table {
    width: 1400px;
    height: 520px;
    margin: 0 auto;
    // overflow: scroll;
    > table {
      overflow: hidden;
    }
  }
  .top {
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        margin: 0 10px;
        height: 30px;
        font-size: 14px;
        padding: 5px 18px;
      }
    }
    .right {
      margin-top: 25px;
      height: 50px;
      padding: 5px 0;
      margin-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .demo-form-inline {
        input {
          height: 35px;
        }
      }
      button {
        margin-left: 10px;
      }
    }
  }

  .block {
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 30px;
  }
}
</style>
